<template>
  <div>
    <div ref="myPage" style="height:calc(100vh);">
      <RelationGraph ref="graphRef" :options="graphOptions" :on-node-click="onNodeClick" :on-line-click="onLineClick">

        <template #graph-plug>
          <div v-if="isShowNodeTipsPanel"
            :style="{ left: nodeMenuPanelPosition.x + 'px', top: nodeMenuPanelPosition.y + 'px' }"
            style="z-index: 999;padding:10px;background-color: #ffffff;border:#eeeeee solid 1px;box-shadow: 0px 0px 8px #cccccc;position: absolute;">
            <div style="line-height: 25px;padding-left: 10px;color: #888888;font-size: 12px;">节点名称：{{ currentNode.text }}
            </div>
            <div class="c-node-menu-item">id:{{ currentNode.text }}</div>
            <div class="c-node-menu-item">图标:{{ currentNode.data.myicon }}</div>
          </div>
        </template>
      </RelationGraph>
    </div>
  </div>
</template>

<script>
// 如果您没有在main.js文件中使用Vue.use(RelationGraph); 就需要使用下面这一行代码来引入relation-graph
import RelationGraph from 'relation-graph';
import { getPersonHistory, getPersonRelationship } from '@/api/persons.js'
import { formatDate, renderDateRange } from '@/utils/date.js'


export default {
  name: 'Demo',
  components: { RelationGraph },
  data() {
    return {
      isShowCodePanel: false,
      isShowNodeTipsPanel: false,
      nodeMenuPanelPosition: { x: 0, y: 0 },
      currentNode: {},
      graphOptions: {
        allowSwitchLineShape: true,
        allowSwitchJunctionPoint: true,
        defaultNodeColor: 'rgba(66,187,66,1)',
        defaultJunctionPoint: 'border'
        // 这里可以参考"Graph 图谱"中的参数进行设置
      },
      nodes: [],
      lines: []
    };
  },
  mounted() {
    this.getCompanyRelationship({ type: 'company', id: 1 })


  },
  methods: {
    showGraph() {
      const __graph_json_data = {
        rootId: '1',
        nodes: this.nodes,
        lines: this.lines,
      };
      this.$refs.graphRef.setJsonData(__graph_json_data, (graphInstance) => {
        // 这些写上当图谱初始化完成后需要执行的代码
      });
    },
    onNodeClick(nodeObject, $event) {
      const nodeType = nodeObject.data.type;

      if (nodeType === 'person') {
        const personId = nodeObject.data.personId
        this.getPersonHistory(personId);
      }

      if (nodeType === 'company') {
        const companyId = nodeObject.data.companyId
        this.getCompanyRelationship({
          type: 'company',
          id: companyId
        })
      }

      if (nodeType === 'school') {
        const schoolId = nodeObject.data.schoolId
      }

    },
    onLineClick(lineObject, linkObject, $event) {
    },
    showNodeTips(nodeObject, $event) {
      this.currentNode = nodeObject;
      const _base_position = this.$refs.graphRef.getInstance().options.fullscreen ? { x: 0, y: 0 } : this.$refs.myPage.getBoundingClientRect();
      console.log('showNodeMenus:', this.$refs.graphRef.getInstance().options.fullscreen, $event.clientX, $event.clientY, _base_position);
      this.isShowNodeTipsPanel = true;
      this.nodeMenuPanelPosition.x = $event.clientX - _base_position.x + 10;
      this.nodeMenuPanelPosition.y = $event.clientY - _base_position.y + 10;
    },
    hideNodeTips(nodeObject, $event) {
      this.isShowNodeTipsPanel = false;
    },
    getCompanyRelationship(data) {
      this.nodes = [];
      this.lines = [];
      getPersonRelationship(data).then(res => {
        const companyRelationshipData = res.data;
        const id = String(this.nodes.length + 1)
        this.nodes.push({
          id,
          text: companyRelationshipData.name,
          data: { myicon: 'el-icon-star-on', type: 'company', companyId: data.id },
        })

        const personList = companyRelationshipData.personList || [];

        personList.forEach(personData => {
          this.pushCompanyAndSchool(personData, id, data.id)
        })

        this.showGraph();
      })
    },
    getPersonHistory(id) {
      this.nodes = [];
      this.lines = [];
      getPersonHistory({ personId: id }).then(res => {
        const personData = res.data;
        this.pushCompanyAndSchool(personData)
        this.showGraph();
      })
    },

    pushCompanyAndSchool(personData, parentId, companyId) {
      const personNodeId = String(this.nodes.length + 1)
      this.nodes.push({
        id: personNodeId,
        text: personData.personName,
        data: { myicon: 'el-icon-star-on', type: 'person', personId: personData.personId },
      })

      const companies = personData.companyHistory || []
      if (parentId && companyId) {
        // this.lines.push({ from: parentId, to: personNodeId, text: '员工' })
        const curCompany = companies.find(company => company.companyId === companyId) 
        if(curCompany){
          this.lines.push({ from: personNodeId, to: parentId, text: `${curCompany.position} ${renderDateRange(curCompany.startTime, curCompany.endTime)}` })

        }
      }

      
      companies.forEach(company => {
        if (parentId && companyId && company.companyId === companyId) {
          return
        }
        const node = {
          id: String(this.nodes.length + 1),
          text: company.companyName,
          data: { myicon: 'el-icon-star-on', type: 'company', companyId: company.companyId }
        }
        this.nodes.push(node)
        this.lines.push({ from: personNodeId, to: node.id, text: `${company.position} ${renderDateRange(company.startTime, company.endTime)}` })
      });

      const schools = personData.schoolHistory || []
      schools.forEach(school => {
        const isSchoolExist = this.nodes.find(node => {
          return node.data.schoolName === school.school
        })
        if (!isSchoolExist) {
          const node = {
            id: String(this.nodes.length + 1),
            text: school.school,
            data: { myicon: 'el-icon-star-on', type: 'school', schoolId: school.schoolId, schoolName: school.school },
          }
          this.nodes.push(node)
          this.lines.push({ from: personNodeId, to: node.id, text: `就读${renderDateRange(school.startTime, school.endTime)}` })
        } else {
          this.lines.push({ from: personNodeId, to: isSchoolExist.id, text: `就读${renderDateRange(school.startTime, school.endTime)}` })
        }
      });

    },
  }
};
</script>

<style lang="scss" scoped>
.c-my-rg-node {
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  place-items: center;
  justify-content: center;
}

.c-node-menu-item {
  line-height: 30px;
  padding-left: 10px;
  cursor: pointer;
  color: #444444;
  font-size: 14px;
  border-top: #efefef solid 1px;
}

.c-node-menu-item:hover {
  background-color: rgba(66, 187, 66, 0.2);
}
</style>

<style lang="scss" scoped>
.c-my-panel {
  position: absolute;
  left: 10px;
  top: 10px;
  border-radius: 10px;
  z-index: 800;
  background-color: #efefef;
  border: #eeeeee solid 1px;
  padding: 20px;

  .c-option-name {
    color: #666666;
    font-size: 14px;
    line-height: 40px;
    padding-left: 10px;
    padding-right: 10px;
  }
}
</style>
